<template>
	<section>
		<!--start  面包屑-->
	    <div class="location">
	      <el-breadcrumb separator="/">
	        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
	        <el-breadcrumb-item :to="{path:'/keHu'}">客户</el-breadcrumb-item>
	        <el-breadcrumb-item :to="{path:'/keHu'}">客户列表</el-breadcrumb-item>
	        <el-breadcrumb-item>修改个人客户</el-breadcrumb-item>
	      </el-breadcrumb>
	       <help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
	    </div>
	     <!--start content-->
   		 <div class="content" id="content">
   		 	<!--重置密码-->
   		 		<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="add">
						<div class="search-title">
							<p>重置密码</p>
						</div>
						<div class="form">
							<ul class="accoUL accoULzhang">
			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>账号</span><input id="str" v-model="operatorAccount" disabled="disabled" style="cursor: no-drop;background: #eff1f8;" />
			   		 			</li>
			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>密码</span><input type="password" v-model="operatorLoginPassword" @blur="inpasswd"/>
			   		 				<p v-if="inpaww" style="text-align: left;text-indent: 80px;">密码为6-20位字母或数字！</p>
			   		 			</li>
			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>重复密码</span><input type="password" v-model="restwo" @blur="inpasstwo" />
			   		 				<p v-if="intwo" style="text-align: left;text-indent: 80px;">两次密码必须一至！</p>
			   		 			</li>
			   		 		</ul>
						</div>
						<div class="search-btn">
							<el-button type="primary" @click="psatijiao">确定</el-button>
							<el-button @click="add=false">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
   		 	<!---->
   		 	<h2 style="color: #03b8cc;font-weight: normal;">个人信息</h2>
   		 	<div class="personal">
   		 		<div class="per-left">
   		 			<ul style="float: left;">
   		 				<li>
		   		 			<em class="iconfont">&#xe708;</em><span>姓名</span>
		   		 			<input class="inptwid" type="text" v-model="memberName" /></br>
		   		 		</li>
		   		 		<li>
		   		 			<span>级别</span>
		   		 			<el-select v-model="gradeCode"  placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.gradeCode"
							      :label="item.gradeName"
							      :value="item.gradeCode">
							    </el-option>
							</el-select>
		   		 		</li>
		   		 	<!--</ul>
		   		 	<ul style="float: left;margin-left: 50px;">-->
		   		 		<li style="text-align: left;">
		   		 			<div style="float: left;margin-left: 18px;margin-right: 69px;">
		   		 				<span>电话</span>
		   		 				<input class="inptdun" type="text"  v-model="operatorTel" /></br>
		   		 			</div>
		   		 			<div>
		   		 				<span>QQ</span>
		   		 				<input class="inptdun" type="text" v-model="operatorQq"  />
		   		 			</div>
		   		 		</li>
		   		 		<li style="text-align: left;margin-left: 11px;">
		   		 			<span>Email</span>
		   		 			<input class="inptdun" type="text" v-model="operatorEmail" />
   		 				</li>
   		 			</ul>
   		 		</div>
   		 		<div class="per-right">
   		 			<span>头像</span>
   		 			<el-upload
					    class="avatar-uploader"
					    :class="{uploading:headerImg.uploading}"
					    :action="uploadUrl"
					    :data="headerImg.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess"
					    :on-error="handleAvatarError"
					    :before-upload="beforeAvatarUpload">
					    <img v-if="headerImg.isImgSrc||headerImg.imgSrc" :src="headerImg.imgSrc" class="avatar">
				    	<i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!headerImg.uploading,'el-icon-loading':headerImg.uploading}"></i>
					</el-upload>
   		 		</div>
   		 	</div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证正面</span>
   		 			<el-upload
					    class="avatar-shenfen-uploader avatar-uploader"
					    :action="uploadUrl"
					    :data="certificateImg1.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess1"
					    :on-error="handleAvatarError1"
					    :before-upload="beforeAvatarUpload1">
					    <img v-if="certificateImg1.isImgSrc||certificateImg1.imgSrc" :src="certificateImg1.imgSrc" class="avatar">
				    	<i class="avatar-uploader-icon el-icon-plus" v-else></i>
					</el-upload>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u676.png" />
   		 		</div>
   		 	</div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证反面</span>
   		 			<el-upload
					    class="avatar-shenfen-uploader avatar-uploader"
					    :action="uploadUrl"
					    :data="certificateImg2.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess2"
					    :on-error="handleAvatarError2"
					    :before-upload="beforeAvatarUpload2">
					    <img v-if="certificateImg2.isImgSrc||certificateImg2.imgSrc" :src="certificateImg2.imgSrc" class="avatar">
				    	<i class="avatar-uploader-icon el-icon-plus" v-else></i>
					</el-upload>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u678.png" />
   		 		</div>
   		 	</div>
         <div class="persZh">
           <div class="shenfen">
             <span class="perSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;片</span>
             <el-upload
               class="avatar-shenfen-uploader avatar-uploader"
               :action="uploadUrl"
               :data="certificateImg3.updata"
               :show-file-list="false"
               :on-success="handleAvatarSuccess3"
               :on-error="handleAvatarError3"
               :before-upload="beforeAvatarUpload3">
               <img v-if="certificateImg3.isImgSrc||certificateImg3.imgSrc" :src="certificateImg3.imgSrc" class="avatar">
               <i class="avatar-uploader-icon el-icon-plus"  v-else></i>
             </el-upload>
           </div>
         </div>
   		 	<div class="account">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">账号信息</h2>
   		 		<ul class="accoUL">
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>手机</span>
		   		 		<input class="inptdun" type="text" v-model="operatorPhone"  @blur="yanshouji" disabled="disabled" style="cursor: no-drop;background: #eff1f8;"  />
		   		 		<p v-if="inphone" style="text-align: left;text-indent: 80px;color: #f50;position: absolute;">手机格式不正确</p>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>账号</span>
   		 				<input id="str" v-model="operatorAccount" disabled="disabled" style="cursor: no-drop;background: #eff1f8;" />
   		 			</li>

   		 			<li class="accoUL-li">
   		 				<a style="cursor: pointer;" @click="add=true">重置密码</a>
   		 			</li>
   		 		</ul>
   		 	</div>
   		 	<div class="caiwu">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">财务信息</h2>
   		 		<ul class="accoUL" style="float: left;width: 620px;">
   		 			<li>
   		 				<span>开户名称</span><input  v-model="operatorInvoiceNane" />
   		 			</li>
   		 			<li>
   		 				<span>银行账号</span><input  v-model="operatorInvoiceAccount" />
   		 			</li>
   		 			<li>
   		 				<span>发票抬头</span><input  v-model="operatorInvoiceTitle" />
   		 			</li>
   		 		</ul>
   		 		<ul class="accoUL" style="float: left;width: 650px;">
   		 			<li>
   		 				<span>开户银行</span><input  v-model="operatorInvoiceBank"/>
   		 			</li>
   		 			<li>
   		 				<span>纳税人识别号</span><input  v-model="operatorInvoiceTaxId" />
   		 			</li>
   		 		</ul>
   		 	</div>
   		 	<div class="queren" style="">
   		 		  <el-button type="primary" :disabled="clickBtn"  @click="upsave">保存</el-button>
		        <el-button @click="$router.push({path:'/kehu'})">取消</el-button>
   		 	</div>

   		 </div>
   		 <!--end content-->
	</section>
</template>
<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
			return {
        clickBtn:false,                 //请求数据后禁用按钮
				helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
	        	/* start upload */
	       		uploadUrl:"/v3/misc/common/uploadFile",
	        	headerImg:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg1:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true,
					firstShowDiv:true,

	        	},
	        	certificateImg2:{
	        		updata:{
							"moduleName":"basic",
							"fileName":"",
						},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true,
					firstShowDiv:true,
	        	},
        certificateImg3:{
          updata:{
            "moduleName":"basic",
            "fileName":"",
          },
          imgSrc:"",
          isImgSrc:false,
          uploading:false,
          canUpload:true,
          firstShowDiv:true,
        },
	        	/* end upload */
				imageUrl: '',
				dialogImageUrl: '',
				dialogVisible: false,
				checked: true,
				inpu: false,
				ovalue: '',
				radio: '',
				//      	dataBillstate:'',		//状态
				disa: '', 						//身份正面禁用
				disa2: '', 						//身份反面禁用
				add: false,
				operatorLoginPassword: '', 		//密码
				restwo: '', 					//确认密码
				inpaww: false,
				intwo: false,
				inphone: false, 				//手机格式是否正确
				qunbu: true, 					//必须输入的信息
				modifData: [],
				memberName: '', 				//客户姓名
				operatorPhone: '', 				//手机
				operatorTel: '', 				//电话
				operatorQq: '',				 	//qq
				operatorEmail: '', 				//邮箱
				operatorAccount: '', 			//账户
				positio: '', 					//职位
				jibie: '', 						//级别
				operatorInvoiceNane: '', 					//开户名称
				operatorInvoiceBank: '', 					//开户银行
				operatorInvoiceAccount: '', 					//银行账号
				operatorInvoiceTaxId: '', 					//纳税人识别号
				operatorInvoiceTitle: '', 					//发票抬头
				options: [],
				gradeCode: '', 					//等级
				operatorCode:'',
			}

		},
		methods: {
			systemTemplateAjax(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000003"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
    //------------------------头像上传 start--------------------------
			handleAvatarSuccess(res,file,fileList) {
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = true;
				this.headerImg.imgSrc = res;
			},
			handleAvatarError(err, file , fileList){
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = !!this.headerImg.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload(file) {
				this.headerImg.uploading = true;
		      	this.headerImg.canUpload = false;
		      	this.headerImg.isImgSrc = false;
		      	this.headerImg.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			/* end uploadheadImg */
//------------------------头像上传 end--------------------------

//-----------------------/* start 身份证正面 */--------------------------
			handleAvatarSuccess1(res, file , fileList) {
				this.certificateImg1.fileListLength = fileList.length;
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = true;
				this.certificateImg1.imgSrc = res;
			},
			handleAvatarError1(err, file , fileList){
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = !!this.certificateImg1.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload1(file) {
				this.certificateImg1.uploading = true;
		      	this.certificateImg1.canUpload = false;
		      	this.certificateImg1.isImgSrc = false;
		      	this.certificateImg1.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------* end 身份证正面 * --------------------------


//-------------------*start 身份证反面 * --------------------------
			handleAvatarSuccess2(res, file , fileList) {
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.canUpload = true;
		      	this.certificateImg2.isImgSrc = true;
				this.certificateImg2.imgSrc= res;
			},
			handleAvatarError2(err, file , fileList){
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.canUpload = true;
		      	this.certificateImg2.isImgSrc = !!this.certificateImg2.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload2(file) {
				this.certificateImg2.uploading = true;
		      	this.certificateImg2.canUpload = false;
		      	this.certificateImg2.isImgSrc = false;
		      	this.certificateImg2.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 身份证反面 * --------------------------

//-------------------*start 上传名片 * --------------------------
      handleAvatarSuccess3(res, file , fileList) {
        this.certificateImg3.uploading = false;
        this.certificateImg3.canUpload = true;
        this.certificateImg3.isImgSrc = true;
        this.certificateImg3.imgSrc= res;
      },
      handleAvatarError3(err, file , fileList){
        this.certificateImg3.uploading = false;
        this.certificateImg3.canUpload = true;
        this.certificateImg3.isImgSrc = !!this.certificateImg3.imgSrc;
        this.Public.openError(this,"上传失败");
      },
      beforeAvatarUpload3(file) {
        this.certificateImg3.uploading = true;
        this.certificateImg3.canUpload = false;
        this.certificateImg3.isImgSrc = false;
        this.certificateImg3.updata.fileName = file.name;

        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.certificateImg3.uploading = false;
          this.certificateImg3.canUpload = true;
          this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
        }
        if(!isLt2M) {
          this.certificateImg3.uploading = false;
          this.certificateImg3.canUpload = true;
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isPNG || isJPG) && isLt2M;
      },
//-------------------*end 上传名片 * --------------------------

//验证密码格式
			inpasswd() {
				var ostr = this.operatorLoginPassword;
				var reg = /^[a-zA-Z0-9]{6,20}$/;
				if(reg.test(ostr) != true) {
					this.inpaww = true;
				} else {
					this.inpaww = false;
				}
			},
//验证两次密码是否一直
			inpasstwo() {
				if(this.operatorLoginPassword == this.restwo) {
					this.intwo = false
				} else {
					this.intwo = true
				}
			},
//验证手机格式
			yanshouji() {
				var ostr = this.operatorPhone;
				var reg = /^1[34578]\d{9}$/;
				if(reg.test(ostr) != true) {
					this.inphone = true;
				} else {
					this.inphone = false;
				}
			},
//提交修改信息
			upsave() {
				if(!this.inphone) {
          this.clickBtn=!this.clickBtn;
					this.axios({
						method: 'put',
						url: "/v3/basic/members/"+localStorage.getItem("memberCode"),
						data: {
							"memberCode": localStorage.getItem("memberCode"),	//确定要提交的客户编号客户编号
							"operatorPortraitUrl":this.headerImg.imgSrc,                //头像
							"operatorIdNumberUrl":this.certificateImg1.imgSrc,          //身份证正面
							"operatorIdNumberUrl2":this.certificateImg2.imgSrc,         //身份证反面
              "operatorBussinesscardUrl":this.certificateImg3.imgSrc,         //名片
							"memberName": this.memberName,             	//提交姓名
							"operatorPhone": this.operatorPhone, 							//提交手机
							"operatorEmail": this.operatorEmail, 							//提交邮箱
							".operatorAccount": this.operatorAccount, 		//提交账号
							"operatorQq": this.operatorQq, 									//提交QQ
							"operatorTel": this.operatorTel, 								//提交电话
							"dataBillstate": this.dataBillstate, 			//提交状态
							"gradeCode": this.gradeCode, 					//级别
							"operatorInvoiceNane":this.operatorInvoiceNane,							//开户名称
							"operatorInvoiceBank":this.operatorInvoiceBank,							//开户银行
							"operatorInvoiceAccount":this.operatorInvoiceAccount,					//银行账号
							"operatorInvoiceTaxId":this.operatorInvoiceTaxId,						//纳说人识别号
							"operatorInvoiceTitle":this.operatorInvoiceTitle,						//发票抬头
						}
					}).then((res) => {
						this.clickBtn=!this.clickBtn;
						this.$notify({
							message: '操作成功！',
							type: 'success'
						});
						this.$router.push({path:"/keHu"});
					}).catch((err)=>{
              this.clickBtn=!this.clickBtn;
					    this.Public.openError(this,err.response.data)
				    });
				} else {
					this.$notify.error({
						message: '请输入正确信息',
					});
				}
			},
//重置密码
			psatijiao() {
				this.axios({
					method: 'PUT',
					url: "/v3/member/operators/"+this.operatorCode+"/"+ this.md5(this.operatorLoginPassword).toUpperCase() +"/resettingPlatOperator",
					data:{
					}
				}).then((res) => {
					this.$notify({
						message: '操作成功！',
						type: 'success'
					});
					this.add=false
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data)
			    });
			},
			queryAll(){
				this.axios({
					method: 'post',
					url: "/v3/member/grades/listAll",
					data:{}
				}).then((res) => {
						this.options = res.data.list;
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data)
			    });
			}
		},
		mounted() {
//			this.$refs.operatorIdNumberUrl.$el.childNodes[1].onclick=()=>{
//				if(this.disa){
//					this.Public.openInfo(this,"请先删除已上传的图片")
//				}else{
//
//				}
//			};
//			this.$refs.operatorIdNumberUrl2.$el.childNodes[1].onclick=()=>{
//				if(this.disa2){
//					this.Public.openInfo(this,"请先删除已上传的图片")
//				}else{
//
//				}
//			};
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("content");
			cont.style.height = winHieg - 115 + "px";
			this.axios({
				method: 'GET',
				url: "/v3/basic/members/"+localStorage.getItem("memberCode"),
			}).then((res) => {
					this.modifData = res.data;
					this.memberName = this.modifData.memberName; 						// 获取姓名
					this.headerImg.imgSrc = res.data.operatorPortraitUrl;				// 头像
					this.certificateImg1.imgSrc = res.data.operatorIdNumberUrl;		// 身份证正面
					this.certificateImg2.imgSrc = res.data.operatorIdNumberUrl2;	//身份证反面
          this.certificateImg3.imgSrc = res.data.operatorBussinesscardUrl;	//名片
					this.operatorPhone = this.modifData.operatorPhone; 					// 获取手机号
					this.operatorEmail = this.modifData.operatorEmail; 					// 获取邮箱
					this.operatorAccount = this.modifData.operatorAccount; 				// 获取账号
					this.operatorTel = this.modifData.operatorTel; 						// 获取电话
					this.operatorQq = this.modifData.operatorQq; 						// 获取QQ
					this.dataBillstate = res.data.dataBillstate; 						// 获取状态
					this.gradeCode = res.data.gradeCode; 								// 获取级别
					this.operatorInvoiceNane=this.modifData.operatorInvoiceNane;		// 获取开户名称
					this.operatorInvoiceBank=this.modifData.operatorInvoiceBank;		// 获取开户银行
					this.operatorInvoiceAccount=this.modifData.operatorInvoiceAccount;	// 获取银行账号
					this.operatorInvoiceTaxId=this.modifData.operatorInvoiceTaxId;		// 获取纳说人识别号
					this.operatorInvoiceTitle=this.modifData.operatorInvoiceTitle;		// 获取发票抬头
					this.operatorCode=this.modifData.operatorCode;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data);
		    });
			this.queryAll();
			//帮助功能
			this.systemTemplateAjax();
		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";

	/*body{
			overflow-y: auto!important;
		}*/

	.location {
		padding: 3px 0 15px 0;
	}

	.content {
		background: #fff;
		padding: 15px;
		/*height: 1850px;*/
		overflow: auto!important;
		font-family: "微软雅黑";
		position: relative;
		overflow: auto;
		min-width: 1330px;
	}

	.per-left {
		margin-left: 30px;
		float: left;
	}

	.per-left li {
		height: 55px;
		text-align: right;
	}

	.per-left li input {
		text-indent: 5px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid #cdd9e6;
	}

	.per-left li em,
	.accoUL li em {
		color: #f50;
	}

	.per-left li span {
		margin-right: 5px;
	}

	.per-left li .inptwid {
		width: 540px;
	}
	.per-left li .inptdun {
		width: 220px;
	}

	.personal {
		margin-top: 20px;
	}
	/*上传头像*/
		.avatar-uploader {
		display: inline;
	}
	.avatar-uploader .el-upload {
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	  }
	  .avatar-uploader.uploading .el-upload{
	  	border: 1px dashed #d9d9d9;
	  }
	  .avatar-uploader-icon {
	  	border: 1px dashed #d9d9d9;
	    font-size: 28px;
	    color: #8c939d;
	    width: 110px;
	    height: 110px;
	    line-height: 110px;
	    text-align: center;
	  }
	  .uploading .avatar-uploader-icon{
	  	border-color: transparent;
	  }
	  .avatar {
	    width: 110px;
	    height: 110px;
	    display: block;
	    border-radius: 6px;
	  }
	  .avatar-shenfen-uploader .avatar {
	    width: 220px;
	    height: 125px;
	    display: block;
	  }
	/*end*/
	.per-right {
		margin-left: 130px;
		float: left;
	}
	.per-right span {
		float: left;
		margin-right: 16px;
	}
	.persZh {
		clear: both;
		margin-left: 10px;
		margin-top: 20px;
		height: 128px;
	}
	.perSpan {
		float: left;
	}
	.el-upload {
		float: left;
	}
	.shenfen {
		width: 420px;
		float: left;
	}
	.el-upload--picture-card {
		width: 125px;
		height: 125px;
		line-height: 125px;
	}
	.accoUL {
		text-align: right;
		width: 620px;
		margin-top: 20px;
		margin-bottom: 60px;
	}
	.accoUL input {
		width: 540px;
		text-indent: 5px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid #cdd9e6;
	}
	.accoUL li span {
		margin-right: 10px;
	}
	.accoUL li {
		height: 60px;
	}
	.account {
		margin-top: 20px;
	}
	.account .accoUL-li {
		text-align: left;
		text-indent: 80px;
		height: 40px;
	}
	.accoUL-li span {
		display: inline-block;
		text-indent: 0;
		text-align: center!important;
		width: 120px;
		height: 20px;
		line-height: 22px;
		background: #e9ecf3;
		color: #fff;
		margin-right: 3px!important;
		font-size: 13px;
	}
	.accoUL p {
		color: #f50;
	}
	.accoULzhang{
		width: 452px;
	}
	.accoULzhang input{
		width: 370px;
	}
	.queren {
		position: fixed;
		bottom: 0px;
		margin-left: -15px;
		width: 87%;
		background: #fff;
		height: 80px;
	}
	.queren a {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		background: #fff!important;
		border: 1px solid #cdd9e6;
		color: #666!important;
		width: 80px;
		border-radius: 20px;
		text-align: center;
		margin-top: 20px;
		margin-right: 20px;
		box-sizing: border-box;
	}
	.queren .baocun {
		color: #fff!important;
		background: #13C19F!important;
		z-index: 100;
		cursor: pointer;
		border: 0;
		margin-left: 30px;
	}
	.specific-search {
		position: fixed;
		width: 87%;
		top: 80px;
		left: 180px;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}
	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}
	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
	}
	.search-btn {
		margin-top: 70px;
	}
	.specific-search {}
	.fade-enter-active,.fade-leave-active {
		transition: .4s;
	}
	.fade-enter,.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,.slideDown-leave-active {
		transition: .4s;
	}
	.slideDown-enter,.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}
	.content input:hover {
		border-color: #03B8CC;
		transition: 0.5s;
	}
	/* start firstImg */
	.firstShowCertificateImg1{

	}
	/* start firstImg */
</style>
